<template>
  <div class="gaoboxPage">
    <div class="gaoboxPage-top">
      <div class="gaoboxPage-top-left">{{ carPlate }}</div>
    </div>
    <div class="gaoboxPage-body" :title="address">{{ address }}</div>
    <div class="gaoboxPage-bottom">
      <div class="gaoboxPage-bottom-left">
        今日运输
        <div class="number">{{ carNumber }}</div>
        <div class="bottomCi">次</div>
      </div>
      <div class="gaoboxPage-bottom-right">查看轨迹</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'gaoboxPage',
  data() {
    return {
      carPlate: '津B 88888',
      address: '东丽区xxx路123号',
      carNumber: 5,
    }
  },
}
</script>

<style scoped lang="less">
.gaoboxPage {
  width: 253px;
  height: 100%;
  background-image:url(" ");
  background-repeat: no-repeat;
  padding: 10px 10px 10px 17px;
  &-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #dcfffd;
    line-height: 32px;
    text-align: justified;
    font-style: normal;
    text-transform: none;
    &-left {
      display: flex;
      align-items: center;
    }
    &-right {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #0fefb9;
      line-height: 32px;
      text-align: justified;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
    .number {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 20px;
      color: #dcfffd;
      line-height: 32px;
      text-align: justified;
      font-style: normal;
      text-transform: none;
      padding: 0 3px;
    }
    .bottomCi {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff88;
      line-height: 19px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  &-body {
    margin: 25px auto 5px auto;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #dcfffd;
    line-height: 32px;
    text-align: justified;
    font-style: normal;
    text-transform: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  &-top {
    height: 10px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 16px;
    color: #dcfffd;
    line-height: 32px;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }
}
</style>
